<template>
	<view class="order-container container">
		<view class="order-list" v-if="orderList.length">
			<view class="order-item" v-for="(item,index) in orderList" :key="item.id">
				<view class="order-item-header list-flex">
					<view class="orderno">订单号<text class="no">{{item.orderNo}}</text></view>
					<view :class="`order-status ${item.orderStatus === 1 ? 'order-active' : ''}`">
						{{ `${item.orderStatus === 1 ? '已支付' : '未支付'}` }}
					</view>
				</view>
				<view class="goods-item list-flex" v-for="(item,index) in item.orderDetailList" :key="id">
					<view class="left">
						<image :src="`${item.imageUrl}`" mode="widthFix" class="img" />
					</view>
					<view class="mid">
						<view class="goods-name">{{item.name}}</view>
						<view class="goods-blessing">商品测试</view>
					</view>
					<view class="right">
						<view class="goods-price">¥{{item.price}}</view>
						<view class="goods-count">x{{item.count}}</view>
					</view>
				</view>
				<view class="order-item-footer">
					<view class="total-amount list-flex">
						<text class="text">实付</text>
						<text class="price"><text>¥</text>{{item.totalAmount}}</text>
					</view>
				</view>
			</view>
		</view>

		<not-logged-in v-else
			:obj="{text:' 还没有购买商品，快去购买吧～',button:'去购物',url:'/pages/index/index',toTabbar:true}"></not-logged-in>
	</view>
</template>

<script setup>
	import { reqOrderList } from '../../../../../api/orderpay';

	let orderList = ref([]) // 商品列表
	let page = ref(1)
	let limit = ref(10)
	let total = ref(0)

	// 获取订单列表
	const getOrderList = async () => {
		let res = await reqOrderList(page.value, limit.value)
		if (res.code == 200) {
			orderList.value = [...orderList.value, ...res.data.records]
		}
	}

	onShow(() => {
		getOrderList()
	})
</script>

<style lang="scss" scoped>
	/* pages/order/list/index.wxss */

	.list-flex {
		display: flex;
	}

	.order-item {
		margin-top: 16rpx;
		padding: 24rpx 32rpx 24rpx;
		background-color: white;
		border-radius: 14rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.4);

		&:first-child {
			margin: 0rpx;
		}

		.order-item-header {
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;
		}
	}

	.orderno {
		font-size: 28rpx;
		font-weight: normal;
		color: #333333;
		display: flex;
		align-items: center;
		line-height: 40rpx;

		.no {
			margin-left: 6px;
		}
	}

	.order-status {
		font-size: 26rpx;
		line-height: 40rpx;
		color: #8b918c;

	}

	.order-active {
		color: #fa4126;
	}

	.goods-item {
		padding: 16rpx 0;

		.left {
			width: 176rpx;
			height: 176rpx;
			background: #333333;

			.img {
				width: 100%;
			}
		}

		.mid {
			flex: 1;
			margin: 0 12px;

			.goods-name {
				font-size: 28rpx;
				color: #333;
				line-height: 40rpx;
				font-weight: 400;
			}

			.goods-blessing {
				font-size: 24rpx;
				height: 32rpx;
				line-height: 32rpx;
				color: #999999;
				margin: 8rpx 0;
			}
		}

		.right {
			.goods-price {
				white-space: nowrap;
				color: #fa4126;
				font-size: 24rpx;
				line-height: 48rpx;
			}

			.goods-count {
				white-space: nowrap;
				order: 4;
				text-align: right;
				font-size: 24rpx;
				color: #999;
				margin: 20rpx 0 0 auto;
			}
		}
	}

	.order-item-footer {
		.total-amount {
			justify-content: flex-end;
			align-items: center;
		}

		.text {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #333333;
			margin-right: 4px;
		}

		.price {
			font-size: 32rpx;
			color: #fa4126;
			font-weight: bold;

			text {
				font-weight: normal;
			}
		}
	}
</style>